<!DOCTYPE html>
<!--
/*******************************************************************************
#      ____               __          __  _      _____ _       _               #
#     / __ \              \ \        / / | |    / ____| |     | |              #
#    | |  | |_ __   ___ _ __ \  /\  / /__| |__ | |  __| | ___ | |__   ___      #
#    | |  | | '_ \ / _ \ '_ \ \/  \/ / _ \ '_ \| | |_ | |/ _ \| '_ \ / _ \     #
#    | |__| | |_) |  __/ | | \  /\  /  __/ |_) | |__| | | (_) | |_) |  __/     #
#     \____/| .__/ \___|_| |_|\/  \/ \___|_.__/ \_____|_|\___/|_.__/ \___|     #
#           | |                                                                #
#           |_|                 _____ _____  _  __                             #
#                              / ____|  __ \| |/ /                             #
#                             | (___ | |  | | ' /                              #
#                              \___ \| |  | |  <                               #
#                              ____) | |__| | . \                              #
#                             |_____/|_____/|_|\_\                             #
#                                                                              #
#                              (c) 2010-2011 by                                #
#           University of Applied Sciences Northwestern Switzerland            #
#                     Institute of Geomatics Engineering                       #
#                           martin.christen@fhnw.ch                            #
********************************************************************************
*     Licensed under MIT License. Read the file LICENSE for more information   *
*******************************************************************************/

                      TUTORIAL 11: Draw a Line Object
                      
*******************************************************************************/
-->
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../../compiled/deps.js"></script>
<script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>


<script type="text/javascript">

var geometrylayer = null;
var hidden = false;

//------------------------------------------------------------------------------
function main()
{
   // (0) Set location of Artwork directory. Because of CORS this can't be local
   // if you want to open this using file://...
   ogSetArtworkDirectory("http://www.openwebglobe.org/art/");
   
   // (1) create an OpenWebGlobe context using canvas
   // first parameter is canvas-id and second is "fullscreen"
   var ctx = ogCreateContextFromCanvas("canvas", true);
   
   // (2) Create a virtual globe
   var globe = ogCreateGlobe(ctx);
   
   // (3) Add an image and an elevation layer
   var imgBlueMarble500 = 
   {
      url     : ["http://www.openwebglobe.org/data/img"],
      layer   : "World500",
      service : "i3d"
   };
   
   var imgLandsat_CH = 
   {
      url     : ["http://www.openwebglobe.org/data/img"],
      layer   : "LandsatCH",
      /*transparency : 0.5,*/
      service : "i3d"
   };
   
   var elvSRTM_CH = 
   {
      url     : ["http://www.openwebglobe.org/data/elv"],
      layer   : "SRTM",
      service : "i3d"
   };
         
   ogAddImageLayer(globe, imgBlueMarble500);
   ogAddImageLayer(globe, imgLandsat_CH);
  // ogAddElevationLayer(globe, elvSRTM_CH);
   
   // (6) Set the background color
   ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1);
   
   // (7) 3D Model
   // first, we need to retrieve the scene:
   var scene = ogGetScene(ctx);
   
   //then, we need to retrieve the world
   var world = ogGetWorld(scene);
	
   //create a geometry layer
   geometrylayer = ogCreateGeometryLayer(world,"polylines");
   
   

   //create the first polyline -------------------------------------------------
	lng0 = 7.591127;
	lat0 = 47.550558;
	elv0 = 5000;
	
	lng1 = 7.438637;
	lat1 = 46.951081;
	elv1 = 5000;
	
	lng2 = 7.838637;
	lat2 = 46.951081;
	elv2 = 5000;
	
	lng3 = 7.891127;
	lat3 = 47.550558;
	elv3 = 5000;
	
	wgs84coords = [[lng0,lat0,elv0],[lng1,lat1,elv1],[lng2,lat2,elv2],[lng3,lat3,elv3],[lng0,lat0,elv0]]
	
	options = {	color : [1,1,0,1],
					linewidth : 1,
					segmentation : 10
					};
   var geometry1 = ogCreatePolylineWGS84(geometrylayer,wgs84coords,options);
	
	
	
	//create the second polyline ------------------------------------------------
	lng0 = 7.591127+0.1;
	lat0 = 47.550558+0.1;
	elv0 = 5000;
	
	lng1 = 7.438637+0.1;
	lat1 = 46.951081+0.1;
	elv1 = 5000;
	
	lng2 = 7.838637+0.1;
	lat2 = 46.951081+0.1;
	elv2 = 5000;
	
	lng3 = 7.891127+0.1;
	lat3 = 47.550558+0.1;
	elv3 = 5000;
	
	wgs84coords = [[lng0,lat0,elv0],[lng1,lat1,elv1],[lng2,lat2,elv2],[lng3,lat3,elv3],[lng0,lat0,elv0]]
	
	options = {	color : [1,0,0,1],
					linewidth : 4,
					segmentation : 10
					};
   var geometry2 = ogCreatePolylineWGS84(geometrylayer,wgs84coords,options);
	
	
   ogFlyToLookAtPosition(scene, 7.591127, 46.951081, 800, 100000,0,-90,0);
}
//------------------------------------------------------------------------------
   
</script>

</head>
<body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
   <div style="text-align: center">
   <canvas id="canvas"></canvas>          
   </div>
</body>
</html>
